<style>
  .banner-text-new .text-top {
    font-size: 0;
  }
  .tenways-with-text .richtext p {
    color: #fff;
    font-size: 16px;
    line-height: 24px;
    max-width: 585px;
    text-align: center;
    margin: 0 auto;
  }
  .banner-text .text_list .richtext {
    margin-top: 12px;
  }
  .text-top .video-mb {
    display: none;
  }
  .position-with-text .text-content .text_list {
    top: 150px;
  }
  .position-with-text .pc_banner {
    height: 100vh;
    padding-bottom: 0 !important;
  }
  .banner-text .text-bottom {
    z-index: 2;
  }


  @media screen and (max-width: 990px) {
    .tenways-with-text .text-content .text_list {
      position: relative;
      top: 0;
      padding: 40px 0;
    }
    .tenways-with-text .richtext p {
      color: #000;
    }
    .position-with-text {
      background: #fff;
    }
    .position-with-text .text-content .text-bottom {
      background: #fff;
    }
    .tenways-with-text .richtext p {
      font-size: 14px;
      line-height: 22px;
    }
    .position-with-text .text-content .text_list .text-1 {
      color: #000;
    }
    .banner-text .text_list .richtext p {
      color: #2F80ED;
    }
    .position-with-text .text_list {
      padding-top: 0 !important;
    }
    .text-top .video-pc {
      display: none;
    }
    .text-top .video-mb {
      display: block;
    }
    .text_list .text span {
      display: block;
    }
    .position-with-text .text_list svg path {
      fill: #2F80ED;
    }
    .position-with-text .text-bottom .richtext p {
      color: #8D8D8D;
    }
  }

  .tenways-with-text .comming-soon {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
  }

  .banner-text-new {
    background: #000;
    margin-bottom: 0;
    margin-top: 0;
  }

  @media screen and (max-width: 990px) {
    .banner-text .text-content {
      min-height: auto;
      height: auto;
    }
    .text_list svg {
      height: 12px;
      width: auto;
    }
    .banner-text .text-bottom {
      position: relative;
      width: 100%;
      bottom: auto;
      left: auto;
      transform: none;
    }
    .banner-text .text_list .text {
      font-size: 24px;
      line-height: 32px;
      margin-top: 9px;
    }
    .tenways-with-text .text-bottom {
      background: #030404;
      color: #fff;
      padding: 20px 0;
    }
    .tenways-with-text .feature > div div {
      color: #fff;
      font-size: 12px;
      line-height: 15px;
    }
    .tenways-with-text .feature .text {
      text-align: left;
      margin-left: 8px;
    }
    .tenways-with-text .feature .slide {
      font-size: 18px;
      letter-spacing: -0.015em;
      line-height: 180%;
      display: flex;
      align-items: center;
      flex: 0 0 50%;
      background: rgba(103, 115, 159, 0.18);
      border-radius: 8px;
      padding: 16px 12px;
      height: 100%;
    }
    .tenways-with-text .feature-text .feature {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 8px;
    }
    .tenways-with-text .image_mobile {
      display: block;
    }
    .tenways-with-text .pc_banner {
      display: none;
    }

    .tenways-with-text .feature-text svg {
      width: 3.2rem;
      height: 3.2rem;
    }
  }

  @media screen and (max-width: 900px) {
    .tenways-with-text .comming-soon {
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
    }
  }
  @media screen and (min-width: 700px) and(max-height: 700px) {
    .tenways-with-text .comming-soon {
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
    }
  }
</style>
<div class="tenways-with-text {% unless section.settings.position %} position-with-text {% endunless %}">
  <div class="text-content">
    <div class="text_list">
      <div class="text-top">
        <div class="page-width">
          {% if section.settings.html != blank %}
            <div class="html">{{ section.settings.html }}</div>
          {% endif %}
          {% if section.settings.text != blank %}
            <div class="text text-1">{{ section.settings.text }}</div>
          {% endif %}
          {% if section.settings.richtext != blank %}
            <div class="richtext text-2">{{ section.settings.richtext }}</div>
          {% endif %}
          {% if section.settings.text2 != blank and section.settings.product != blank %}
            <div class="comming-soon">{{ section.settings.text2 }}<span>
                {{ section.settings.product.price | money }}</span>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
    <div class="text-top">
      {% if section.settings.video != blank %}
        <div class="video-pc">
          {{ section.settings.video_html }}
        </div>
        <div class="video-mb">
          {{ section.settings.video_mb }}
        </div>
      {% else %}
        <div class="pc_banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"{% if section.settings.height == 'adapt' and section.settings.image != blank %}style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}>
          {%- if section.settings.image != blank -%}
            <img
              srcset='{%- if section.settings.image.width >= 375 -%}
              {{ section.settings.image | img_url: '375x' }} 375w,{%- endif -%}
            {%- if section.settings.image.width >= 750 -%}
              {{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
            {%- if section.settings.image.width >= 1400 -%}
              {{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
            {%- if section.settings.image.width >= 1500 -%}
              {{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
            {%- if section.settings.image.width >= 1780 -%}
              {{ section.settings.image | img_url: '1780x' }} 1780w,{%- endif -%}
            {%- if section.settings.image.width >= 2000 -%}
              {{ section.settings.image | img_url: '2000x' }} 2000w,{%- endif -%}
            {%- if section.settings.image.width >= 3000 -%}
              {{ section.settings.image | img_url: '3000x' }} 3000w,{%- endif -%}
            {%- if section.settings.image.width >= 3840 -%}
              {{ section.settings.image | img_url: '3840x' }} 3840w,{%- endif -%}"
            data-src="{{ section.settings.image | img_url: '1500x' }}"
            alt="{{ section.settings.image.alt | escape }}"
            loading="lazy"
            class="lazyload"
            width="{{ section.settings.image.width }}"
            height="{{ section.settings.image.height }}">
          {%- else -%}
            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
          {%- endif -%}
        </div>
        <div class="image_mobile image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image_mobile != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"{% if section.settings.height == 'adapt' and section.settings.image_mobile != blank %}style="padding-bottom: {{ 1 | divided_by: section.settings.image_mobile.aspect_ratio | times: 100 }}%;"{% endif %}>
          {%- if section.settings.image_mobile != blank -%}
            <img
              srcset='{%- if section.settings.image_mobile.width >= 375 -%}
              {{ section.settings.image_mobile | img_url: '375x' }} 375w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 412 -%}
              {{ section.settings.image_mobile | img_url: '412x' }} 412w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 750 -%}
              {{ section.settings.image_mobile | img_url: '750x' }} 750w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 1100 -%}
              {{ section.settings.image_mobile | img_url: '1100x' }} 1100w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 1500 -%}
              {{ section.settings.image_mobile | img_url: '1500x' }} 1500w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 1780 -%}
              {{ section.settings.image_mobile | img_url: '1780x' }} 1780w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 1903 -%}
              {{ section.settings.image_mobile | img_url: '1903x' }} 1903w,{%- endif -%}
            {{ section.settings.image_mobile | img_url: 'master' }} {{ section.settings.image_mobile.width }}w"
            sizes="{% if section.settings.image_2 != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}"
            src="{{ section.settings.image_mobile | img_url: '1500x' }}"
            loading="lazy"
            alt="{{ section.settings.image_mobile.alt | escape }}"
            width="{{ section.settings.image_mobile.width }}"
            height="{{ section.settings.image_mobile.width | divided_by: section.settings.image_mobile.aspect_ratio }}">
          {%- else -%}
            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
          {%- endif -%}
        </div>
      {% endif %}
    </div>
    <div class="text-bottom">
      <div class="page-width">
        {%- for block in section.blocks -%}
          {% case block.type %}
            {%- when 'feature' -%}
            <div class="feature-text" {{ block.shopify_attributes }}>
              <div class="feature">
                <div class="slide">
                  {%- if block.settings.html_1 != blank -%}
                    {{ block.settings.html_1 }}
                    <div class="text">
                      {{ block.settings.text_1 }}</div>
                  {%- endif -%}
                </div>
                <div class="slide">
                  {%- if block.settings.html_2 != blank -%}
                    {{ block.settings.html_2 }}
                    <div class="text">
                      {{ block.settings.text_2 }}</div>
                  {%- endif -%}
                </div>
                <div class="slide">
                  {%- if block.settings.html_3 != blank -%}
                    {{ block.settings.html_3 }}
                    <div class="text">
                      {{ block.settings.text_3 }}</div>
                  {%- endif -%}
                </div>
                <div class="slide">
                  {%- if block.settings.html_4 != blank -%}
                    {{ block.settings.html_4 }}
                    <div class="text">
                      {{ block.settings.text_4 }}</div>
                  {%- endif -%}
                </div>
              </div>
            </div>
            {%- when 'richtext' -%}
            {% if block.settings.richtext != blank %}
              <div class="richtext text-2" {{ block.shopify_attributes }}>{{ block.settings.richtext }}</div>
            {% endif %}
          {%- endcase -%}
        {%- endfor -%}
      </div>
    </div>
  </div>
</div>

{% unless section.settings.interaction %}
  <script>
    $(window).ready(function() {
      var tooSmall = false;
      var controller = null;
      var maxWidth = 991;

      if ($(window).width() < maxWidth) {
        tooSmall = true;
      }

      function initScrollMagic() {
        const tenwaysBlockDes = document.querySelector(".position-with-text .text-content");
        const tenwaysAgot = tenwaysBlockDes.querySelector(".text_list");
        const AgoxController = new ScrollMagic.Controller();
        const tl = new TimelineMax();

        tl.fromTo('.position-with-text .text_list', 1, {
          autoAlpha: 0,
          opacity: 0
        }, {
          autoAlpha: 1,
          opacity: 1,
          yPercent: '-60%',
          ease: Linear.easing
        },)

        let scene6 = new ScrollMagic
          .Scene({duration: '300', triggerElement: tenwaysBlockDes, triggerHook: 0})
          .setTween(tl)
          .setPin(tenwaysBlockDes)
          .addTo(AgoxController);
      }

      if (! tooSmall) {
        initScrollMagic();
      }

      $(window).resize(function() {
        var wWidth = $(window).width();
        if (wWidth < maxWidth) {
          if (AgoxController !== null && AgoxController !== undefined) {
            AgoxController = AgoxController.destroy(true);
          }
        } else if (wWidth >= maxWidth) {
          if (AgoxController === null || AgoxController === undefined) {
            initScrollMagic();
          }
        }
      });
    })
  </script>
{% endunless %}

{% schema %}
  {
    "name": "Tenways with text AgoT",
    "tag": "section",
    "class": "banner-text spaced-section spaced-section--full-width banner-text-new",
    "settings": [
      {
        "type": "product",
        "id": "product",
        "label": "Product"
      },
      {
        "type": "checkbox",
        "id": "interaction",
        "label": "Interaction",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "position",
        "label": "Position",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "video",
        "label": "show video",
        "default": false
      }, {
        "type": "html",
        "id": "video_html",
        "label": "video pc"
      }, {
        "type": "html",
        "id": "video_mb",
        "label": "video mb"
      }, {
        "type": "html",
        "id": "html",
        "label": "Icon"
      }, {
        "type": "html",
        "id": "text",
        "label": "text"
      }, {
        "type": "text",
        "id": "text2",
        "label": "text 2"
      }, {
        "type": "richtext",
        "id": "richtext",
        "label": "richtext"
      }, {
        "type": "image_picker",
        "id": "image",
        "label": "t:sections.image-with-text.settings.image.label"
      }, {
        "type": "image_picker",
        "id": "image_mobile",
        "label": "Image mobile"
      }, {
        "type": "select",
        "id": "height",
        "options": [
          {
            "value": "adapt",
            "label": "t:sections.image-with-text.settings.height.options__1.label"
          }, {
            "value": "small",
            "label": "t:sections.image-with-text.settings.height.options__2.label"
          }, {
            "value": "large",
            "label": "t:sections.image-with-text.settings.height.options__3.label"
          }
        ],
        "default": "adapt",
        "label": "t:sections.image-with-text.settings.height.label"
      }
    ],
    "blocks": [
      {
        "type": "feature",
        "name": "feature",
        "limit": 1,
        "settings": [
          {
            "type": "html",
            "id": "html_1",
            "label": "html_1"
          },
          {
            "type": "text",
            "id": "text_1",
            "label": "text 1"
          },
          {
            "type": "html",
            "id": "html_2",
            "label": "html_2"
          },
          {
            "type": "text",
            "id": "text_2",
            "label": "text 2"
          }, {
            "type": "html",
            "id": "html_3",
            "label": "html_3"
          }, {
            "type": "text",
            "id": "text_3",
            "label": "text 3"
          }, {
            "type": "html",
            "id": "html_4",
            "label": "html_4"
          }, {
            "type": "text",
            "id": "text_4",
            "label": "text 4"
          }
        ]
      }, {
        "type": "richtext",
        "name": "richtext",
        "settings": [
          {
            "type": "richtext",
            "id": "richtext",
            "label": "richtext"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Tenways with text AgoT"
      }
    ]
  }
{% endschema %}